<template>
  <div>
    <div class="banner">
      <Banner :bannerList="bannerList" />

      <div class="list">
        <v-touch @swipeleft="swipeleft(i)" @swiperight="swiperight(i)" v-for="(v,i) in list" :key="v.id" >
          <dl ref="dls">
            <dt><img :src="v.url" alt="" /></dt>
            <dd class="con">
              <p>{{ v.title }}</p>
              <p>{{ v.desc }}</p>
            </dd>
            <dd @click="deleteList(v.id)" class="del">删除</dd>
          </dl>
        </v-touch>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import touch from "../touch";
export default {
  name: "Home",
  methods: {
    // 请求数据
    getList() {
      axios({
        url: "/api/list",
        method: "GET"
      }).then(resp => {
        // 数据发生了  视图需要更新
        // 但是这个更新是异步的
        this.list = resp.data.data;
        // // 当数据发生改变 并且页面更新完毕了
        // // 这个钩子函数就会执行
        // this.$nextTick().then(() => {
        //   this.$refs.dls.forEach(v => {
        //     touch.swipe(v, "swipeLeft", () => {
        //       v.style.transform = "translate(-20%)";
        //     });
        //     touch.swipe(v, "swipeRight", () => {
        //       v.style.transform = "translate(0%)";
        //     });
        //   });
        // });
      });
    },
    deleteList(id) {
      if (confirm("确认要删除吗？"))
        this.list = this.list.filter(item => item.id !== id);
    },
    swipeleft(i) {
      this.$refs.dls[i].style.transform = "translate(-20%)"
    },
    swiperight(i) {
      this.$refs.dls[i].style.transform = "translate(0%)"
    }
  },
  created() {
    this.getList();
  },

  data() {
    return {
      bannerList: [
        require("../assets/images/1.jpeg"),
        require("../assets/images/2.jpeg"),
        require("../assets/images/3.jpeg")
      ],
      list: []
    };
  }
};
</script>

<style  scoped>
.list {
  width: 100%;
  overflow: hidden;
}
.banner {
  height: 200px;
}

dl {
  display: flex;
  transition: transform 0.9s;
  align-items: center;
}

dt img {
  width: 100%;
}

dt {
  width: 30%;
  flex-shrink: 0;
}

.con {
  width: 70%;
  flex-shrink: 0;
}

.del {
  width: 20%;
  flex-shrink: 0;
}
</style>